

import {canvasClip, globalCtx, px, watchValueChange} from '../libs/utils.js';
import Group from "./group";
import TextStroke from "./text_stroke";
import Img from "./img";


/// 带有选中状态的 垂直版 文字容器
export default class VerticalText extends Group {
    constructor(x, y, width, height,content,textColor = '#d48629',selectTextColor = '#87bf32',isSelected = false) {
        super();
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.font=px(30);
        this.textColor = textColor;
        this.selectTextColor = selectTextColor;
        this.isSelected = isSelected;
        var splitArray = content.split('');
        this.textArray = []
        splitArray.forEach((item, index) => {
            var textStroke = new TextStroke(item, x, y+this.font*index,this.font,this.selectTextColor?textColor:selectTextColor );
            this.addChild(textStroke,`${item}`)
        });
        this.imgSelect = new Img("js/sub/images/route/btn_xuanze.png",  x-( px(48)-this.font)/2,  y+splitArray.length*this.font+5, px(48), px(48));
        this.imgSelect.visible = isSelected;
        this.addChild(this.imgSelect,'imageSelect')
        watchValueChange(this, 'isSelected', (val) => {
            this.resize();
        });
    }
    /**
     * 重新设置参数
     */
    resize() {
        this.child.forEach(item => item.color = this.isSelected?this.selectTextColor :this.textColor);
        this.imgSelect.visible = this.isSelected;
    }

}